<script lang="ts">
import { ref, toRaw } from "vue";
import { useRoute } from 'vue-router';
import { getSearchData } from "../api/Search";
import DualBall from '../components/DualBall.vue'
import { followDesignerStore } from '../stores/userInfo'
export default {

    components: {
        DualBall,
    },
    setup() {
        const route = useRoute();
        //搜索结果(懒加载)
        let SearchDataoffset = ref(20)
        let SearchData: any = ref([])
        let SearchDataLoading = ref(false);
        let SearchDataFinished = ref(false);
        async function changeSearchData() {
            let data = await getSearchData({
                count: 0,
                offset: SearchDataoffset.value,
                search_tab: 1,
                keyword: route.query.keyword,
            })
            SearchData.value.push(...data.data.cell_list.filter((item: any) => item.cell_data[0].button_url === ""))
            SearchDataLoading.value = false;
            SearchDataoffset.value += 20
            if (SearchDataoffset.value >= 300) {
                SearchDataFinished.value = true;
            }

        }
        //设计师
        let SearchDesignerData: any = ref(null)
        async function getSearchDesignerDataFun() {
            let data = await getSearchData({
                count: 0,
                offset: 0,
                search_tab: 62,
                type: "designer",
                keyword: route.query.keyword,
            })
            SearchDesignerData.value = data.data.cell_list
        }
        getSearchDesignerDataFun()
        //用户
        let SearchUserData: any = ref(null)
        async function getSearchUserDataFun() {
            let data = await getSearchData({
                count: 10,
                offset: 0,
                search_tab: 6,
                type: "user",
                sort_by: 1,
                keyword: route.query.keyword,
            })
            SearchUserData.value = data.data.cell_list
        }
        getSearchUserDataFun()

        const following = (user: any) => {
            if (!user.follow) {
                let followed: any = toRaw(followDesignerStore().$state.followDesignerStore);
                let followObj = {
                    designerName: user.name,
                    pic: user.avatar_url,
                    id: user.user_id,
                }
                followed.push(followObj);
                user.follow = !user.follow
            } else {
                let followed: any = toRaw(followDesignerStore().$state.followDesignerStore);
                let index = followed.findIndex((item: any) => user.user_id == item.id)
                followDesignerStore().$state.followDesignerStore.splice(index, 1)
                user.follow = !user.follow
            }

        }

        let active = ref(0)
        return {
            active,
            SearchDataLoading,
            SearchDataFinished,
            SearchData,
            SearchUserData,
            SearchDesignerData,
            following,
            changeSearchData,
        }
    }
}
</script>

<template>
    <div class="SearchResPreView">
        <div class="SearchResPreView-Header">
            <van-sticky>
                <div class="SearchResPreView-SearchImitate">
                    <div class="SearchImitate-Icon" @click="$router.back()">
                        <van-icon name="arrow-left" />
                    </div>
                    <div class="Imitate-input">
                        {{ $route.query.keyword }}
                    </div>
                </div>
            </van-sticky>
        </div>

        <van-tabs v-model:active="active" sticky :offset-top="44">
            <van-tab class="SearchResPreView-All">
                <template #title>
                    <div>
                        <span>全部</span>
                    </div>
                </template>
                <van-list v-model:loading="SearchDataLoading" :finished="SearchDataFinished" @load="changeSearchData">
                    <div class="recommend" v-show="SearchData.length > 0">
                        <div class="list">
                            <div class="item" v-for="item in SearchData" :key="item.cell_data[0].group_id">
                                <img :src="item.cell_data[0].image_infos[0].url">
                                <div class="recommend_meage">
                                    <p class="txt-cut">{{ item.cell_data[0].title }}</p>
                                    <div class="meage">
                                        <div class="recommend_meage_left">
                                            <div class="user-Icon">
                                                <img :src="item.cell_data[0].user_info.avatar_url">
                                            </div>
                                            <div class="recommend_meage_name one-txt-cut">{{
                                                item.cell_data[0].user_info.name }}
                                            </div>
                                        </div>
                                        <div class="recommend_meage_right">

                                            <van-icon name="star-o" v-if="!item.cell_data[0].clicked"
                                                @click="item.cell_data[0].clicked = !item.cell_data[0].clicked" />
                                            <van-icon name="star" color="#ffcc00" v-if="item.cell_data[0].clicked"
                                                @click="item.cell_data[0].clicked = !item.cell_data[0].clicked" />
                                            <span>{{ item.cell_data[0].favor_count }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </van-list>

            </van-tab>

            <van-tab class="SearchResPreView-Designer">
                <template #title>
                    <div>
                        <span>设计师</span>
                    </div>
                </template>
                <Loader v-if="!SearchDesignerData"></Loader>
                <div class="Designer-list" v-if="SearchDesignerData">
                    <div class="Designer-item" v-for="item in SearchDesignerData"
                        :key="item.cell_data[0].user_info.user_id">
                        <div class="Designer-left">
                            <div class="Designer-Icon">
                                <img :src="item.cell_data[0].user_info.avatar_url">
                            </div>
                        </div>
                        <div class="Designer-right">
                            <div class="Designer-Com">
                                <div class="Com-l">
                                    <h3 class="Designer-Name">{{ item.cell_data[0].user_info.name }}</h3>
                                    <div class="sever-info">
                                        <span v-if="item.cell_data[0].service_info.avg_price">{{
                                            item.cell_data[0].service_info.avg_price + `&nbsp` }}</span>
                                        <span> 近期服务{{ item.cell_data[0].service_info.served_people_count }}人</span>
                                    </div>
                                </div>
                                <div class="Com-r">
                                    <van-button plain type="primary" v-if="item.cell_data[0].consulting_button">{{
                                        item.cell_data[0].consulting_button.text }}</van-button>
                                </div>
                            </div>
                            <div class="Designer-Msg">
                                <van-tag plain type="primary" color="#ea884d" class="practiceTime"
                                    v-if="item.cell_data[0].search_tag_info.top_tags.length > 0">{{
                                        item.cell_data[0].search_tag_info.top_tags[0] }}</van-tag>
                                <van-tag plain type="primary" color="#999" class="ExcelStyle"
                                    v-for="tags in item.cell_data[0].search_tag_info.tags">{{ tags }}</van-tag>
                            </div>
                            <div class="line" v-if="item.cell_data[0].sku_info"></div>
                            <div class="Designer-serve" v-if="item.cell_data[0].sku_info">
                                <van-tag type="primary">套餐</van-tag>
                                <div class="serve-Com">
                                    <b class="one-txt-cut">{{ item.cell_data[0].sku_info.name }}</b>
                                    <b>{{ item.cell_data[0].sku_info.price_text }}</b>
                                </div>
                                <van-icon name="arrow" />
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>

            <van-tab class="SearchResPreView-User">
                <template #title>
                    <div>
                        <span>用户</span>
                    </div>
                </template>
                <Loader v-if="!SearchUserData"></Loader>
                <!-- <UserList :UserData="SearchUserData" v-if="SearchUserData"></UserList> -->
                <div class="myfollow-Body">
                    <div class="myfollow-item" v-for="item in SearchUserData" :key="item.cell_data[0].user_info.user_id">
                        <div class="myfollow-itemImgBox">
                            <img :src="item.cell_data[0].user_info.avatar_url">
                        </div>
                        <div class="myfollow-itemcom">
                            <h3>{{ item.cell_data[0].user_info.name }}</h3>
                            <span>
                                {{ item.cell_data[0].user_info.tag_list[0] }}
                                {{ item.cell_data[0].user_info.tag_list[1] }}
                            </span>
                        </div>
                        <!-- item.cell_data[0].user_info.follow = !item.cell_data[0].user_info.follow -->
                        <van-button type="default" class="Btn-Followed" v-if="item.cell_data[0].user_info.follow"
                            @click="following(item.cell_data[0].user_info)">已关注</van-button>
                        <van-button type="success" class="Btn-Follow" v-if="!item.cell_data[0].user_info.follow"
                            @click="following(item.cell_data[0].user_info)">关注</van-button>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>
<style lang="scss" scoped>
.SearchResPreView {
    min-height: 100vh;

    .van-list:v-deep {
        .van-loading {
            background-color: #f5f5f5;
        }
    }

    .SearchResPreView-Header {
        .SearchResPreView-SearchImitate {
            display: flex;
            height: 36px;
            padding: 4px 15px;
            align-items: center;
            background: #fff;

            .SearchImitate-Icon {
                margin-right: 12px;

                i {
                    font-size: 18px;
                }
            }
        }

        .Imitate-input {
            flex: 1;
            font-size: 13px;
            height: 32px;
            display: flex;
            align-items: center;
            background: #f5f5f5;
            border-radius: 18px;
            text-indent: 12px;
        }


    }

    :deep(.van-tabs) {
        .van-tabs__wrap {
            padding: 0px 20%;
            border-bottom: 1px solid #f7f7f7;
            box-sizing: border-box;
            background: #fff;

            .van-tabs__nav {
                .van-tabs__line {
                    width: 15px;
                    background: #000;
                    border-radius: 0;
                }
            }
        }

        .van-tab__panel {
            min-height: 87vh;
            background: #f5f5f5;
        }

        .SearchResPreView-All {
            .SearchResPreView-All-TabSelect {
                display: flex;
                justify-content: space-between;
                padding: 12px 15px;
                font-size: 13px;
                height: 40px;
                box-sizing: border-box;
                background: #fff;

                .TabSelect-type {
                    span {
                        padding: 0 10px;
                    }

                    .active {
                        color: #2e78ff;
                    }
                }

            }

            .recommend {
                background-color: #f5f5f5;
                padding: 10px 6px;

                h3 {
                    color: #898989;
                    font-size: 15px;
                    margin-bottom: 10px;
                }

                .list {
                    column-count: 2;
                    column-gap: 5px;
                    column-width: 100%;

                    .item {
                        width: 100%;
                        break-inside: avoid;
                        margin-top: 5px;
                        background: #fff;
                        border-radius: 4px;
                        overflow: hidden;

                        &:nth-child(1) {
                            margin-top: 0;
                        }

                        img {
                            max-height: 190px;
                            object-fit: cover;
                            object-position: top center;
                        }



                        .recommend_meage {
                            display: flex;
                            justify-content: space-between;
                            flex-direction: column;
                            padding: 0px 6px 4px;

                            >p {
                                margin-top: 5px;
                                word-wrap: break-word;
                                font-size: 14px;
                                font-weight: bold;
                            }

                            .meage {
                                display: flex;
                                align-items: center;
                                margin-top: 4px;

                                .recommend_meage_left {
                                    display: flex;
                                    flex: 1;
                                    overflow: hidden;
                                    align-items: center;

                                    .user-Icon {
                                        width: 22px;
                                        height: 22px;
                                        overflow: hidden;
                                        margin-right: 5px;
                                        border-radius: 50%;

                                        img {
                                            object-fit: cover;
                                        }
                                    }


                                    .recommend_meage_name {
                                        font-size: 12px;
                                        color: #444;
                                        max-width: 75%;
                                    }
                                }

                                .recommend_meage_right {
                                    display: flex;
                                    align-items: center;

                                    img {
                                        margin-right: 30px;
                                        width: 22px;
                                        height: 22px;
                                        display: block;
                                        position: absolute;
                                        top: 1px;
                                        right: 0;
                                    }

                                    i {
                                        margin-right: 4px;
                                    }

                                    span {
                                        font-size: 12px;
                                        color: #444;
                                        font-weight: normal;
                                    }
                                }
                            }

                        }
                    }
                }

            }



        }


        .SearchResPreView-Designer {
            .Designer-list {
                padding: 8px;
                box-sizing: border-box;
                min-height: 100vh;
                background: #f5f5f5;

                .Designer-item {
                    display: flex;
                    min-height: 80px;
                    border-radius: 8px;
                    background: #fff;
                    padding: 10px;
                    box-sizing: border-box;
                    margin-top: 8px;

                    &:nth-child(1) {
                        margin-top: 0;
                    }

                    .Designer-left {
                        margin-right: 12px;

                        .Designer-Icon {
                            width: 54px;
                            height: 54px;
                            overflow: hidden;
                            border-radius: 50%;

                            img {
                                object-fit: cover;
                            }
                        }

                    }

                    .Designer-right {
                        flex: 1;

                        .Designer-Com {
                            display: flex;

                            .Com-l {
                                flex: 1;

                                .Designer-Name {
                                    font-size: 14px;
                                    font-weight: bold;
                                }

                                .sever-info {
                                    display: flex;

                                    span {
                                        font-size: 12px;
                                        color: #999;
                                        display: block;
                                        margin: 4px 0;
                                    }
                                }
                            }

                            .Com-r {
                                .van-button {
                                    width: 60px;
                                    height: 28px;
                                    font-size: 13px;
                                }
                            }
                        }

                        .Designer-Msg {
                            span {
                                margin-left: 6px;

                                &:nth-child(1) {
                                    margin-left: 0;
                                }
                            }
                        }

                        .line {
                            width: 100%;
                            height: 1px;
                            background: #f1f1f1;
                            margin: 15px 0;
                        }

                        .Designer-serve {
                            display: flex;
                            font-size: 12px;
                            align-items: center;
                            justify-content: space-between;

                            .serve-Com {
                                flex: 1;
                                margin: 0 4px;
                                display: flex;
                                justify-content: space-between;

                                b {
                                    &:nth-child(1) {
                                        max-width: 75%;
                                    }
                                }
                            }


                        }
                    }
                }

            }
        }

        .SearchResPreView-User {


            .myfollow-Body {
                margin: 0 12px;

                .myfollow-item {
                    display: flex;
                    height: 50px;
                    align-items: center;
                    border-bottom: 1px solid #f5f5f5;

                    .myfollow-itemImgBox {
                        width: 36px;
                        height: 36px;
                        overflow: hidden;
                        border-radius: 50%;
                        margin-right: 12px;

                        img {
                            object-fit: cover;
                        }
                    }

                    .myfollow-itemcom {
                        flex: 1;

                        h3 {
                            font-size: 14px;
                            font-weight: bold;
                        }

                        span {
                            font-size: 12px;
                            transform: scale(0.9);
                            display: block;
                            transform-origin: left;
                            color: #999;
                        }
                    }

                    .van-button {
                        height: 28px;
                        border-radius: 14px;
                        color: #999;
                        font-size: 12px;
                        margin-right: 8px;
                        padding: 4px 10px;
                    }

                    .Btn-Follow {
                        color: #fff;
                        background: #3dc3af;
                        border-color: #3dc3af;
                    }
                }
            }
        }
    }
}
</style>